<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <!-- import CSS -->
  <link rel="stylesheet" href="https://cdn.staticfile.org/element-ui/2.15.9/theme-chalk/index.css">
  <style scoped>
    .cool-page {
      height: 100vh;
      display: flex;
      flex-direction: column;
    }

    h1 {
      color: #fff;
      text-align: center;
      margin: 0;
      padding: 1rem;
      background-color: #409EFF;
    }

    .el-carousel__item img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    .carousel-caption {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      text-align: center;
      color: #fff;
      text-shadow: 2px 2px 4px #000;
    }

    .featured-section {
      background-color: #f5f5f5;
      padding: 2rem;
      flex-grow: 1;
    }

    .featured-cards {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
      gap: 1rem;
    }

    .featured-img {
      width: 100%;
      height: 200px;
      object-fit: cover;
    }

    .featured-caption {
      padding: 1rem;
      text-align: center;
    }

    h2, h3 {
      margin: 0;
      padding: 0;
    }

    .el-footer {
      text-align: center;
      padding: 1rem;
      background-color: #409EFF;
      color: #fff;
    }
  </style>
</head>
<body>
<div id="app">
  <template>
    <div class="cool-page">
      <el-header>
        <h1>和谐相处</h1>
      </el-header>
      <el-main>
        <el-carousel :interval="5000">
          <el-carousel-item v-for="(item, index) in carouselItems" :key="index">
            <img :src="item.imgUrl" alt="">
            <div class="carousel-caption">
              <h2>{{ item.title }}</h2>
              <p>{{ item.description }}</p>
            </div>
          </el-carousel-item>
        </el-carousel>
        <div class="featured-section">
          <h2>特色内容</h2>
          <div class="featured-cards">
            <el-card v-for="(item, index) in featuredItems" :key="index" :body-style="{ padding: '0px' }">
              <img :src="item.imgUrl" class="featured-img" alt="">
              <div class="featured-caption">
                <h3>{{ item.title }}</h3>
                <p>{{ item.description }}</p>
              </div>
            </el-card>
          </div>
        </div>
      </el-main>
      <el-footer>
        <p>版权所有 © 刘顺国专属</p>
      </el-footer>
    </div>
  </template>
</div>
</body>
<!-- import Vue before Element -->
<script src="https://cdn.staticfile.org/vue/2.6.14/vue.min.js"></script>
<!-- import JavaScript -->
<script src="https://cdn.staticfile.org/element-ui/2.15.9/index.min.js"></script>
<script>
 let v = new Vue({
    el: '#app',
    data: function() {
      return {
        carouselItems: [
          {
            title: '乌云密布',
            description: '暴风雨来临的前奏',
            imgUrl: 'https://picsum.photos/id/1019/1000/600'
          },
          {
            title: '熊视前方',
            description: '我就瞅你咋滴',
            imgUrl: 'https://picsum.photos/id/1020/1000/600'
          },
          {
            title: '自然之美',
            description: '大自然真的是鬼斧神工',
            imgUrl: 'https://picsum.photos/id/1021/1000/600'
          }
        ],
        featuredItems: [
          {
            title: '大好河山',
            description: '自然界的魅力无限',
            imgUrl: 'https://picsum.photos/id/1018/500/300'
          },
          {
            title: '极夜之美',
            description: '大自然的神奇之处',
            imgUrl: 'https://picsum.photos/id/1022/500/300'
          },
          {
            title: '探索自然',
            description: '自然界的神奇令人向往',
            imgUrl: 'https://picsum.photos/id/1023/500/300'
          }
        ]
      }
    },
   methods:{

   }
  })
</script>
</html>